import React, { useEffect, useState } from 'react';
import { Swiper } from 'antd-mobile';
import useRequest, { BASE_URL } from '../../hooks/use-request';

import { Nav, Groups, News } from './components';
import styles from './index.module.css';
import { SearchBar } from '../../components';
const Home = () => {
  // 设置轮播图数据和加载状态state
  const [swipers, setSwipers] = useState([]);

  const { result, loading } = useRequest('/home/swiper', undefined, undefined);

  useEffect(() => {
    if (!result) return;
    const { body: data } = result;
    setSwipers(data);
  }, [result, loading]);

  const items = swipers?.map((item, index) => (
    <Swiper.Item key={index}>
      <div className={styles.content}>
        <img
          src={`${BASE_URL}${item.imgSrc}`}
          alt=""
          style={{ width: '100%' }}
        />
      </div>
    </Swiper.Item>
  ));

  return (
    <div style={{ height: '100%' }}>
      <div className={styles.swipers}>
        {/* 搜索框 */}
        <div className={styles.search}>
          <SearchBar styles={styles} />
        </div>
        {/* 轮播图 */}
        {result && swipers && <Swiper>{items}</Swiper>}
      </div>

      {/* 导航菜单 */}
      <Nav />
      {/* 租房小组 */}
      <Groups />
      {/*  */}
      <News />
    </div>
  );
};

export default Home;
